<template>
<!-- // 魔方 -->
    <div class="magic" :style='`padding-top:${options.paddingTop/2}px;padding-bottom:${options.paddingBottom/2}px;height:${boxHeight}px`'>
       <!-- 竖着的长方形的   4个，3个，2个 -->
        <!-- <span v-if="navDetail.type == 'column' ">宽度{{750/navDetail.number}}像素</span>
        <span v-if="navDetail.type== 'square' ">375*375像素</span> 
        <span v-if=" navDetail.type=='rect_square' || navDetail.type=='square_rect'"> {{index==0 ? '375*750':'375*375'}}像素</span> 
        <span v-if="navDetail.type=='rect_square_top'"> {{index==0 ? '750*375':'375*375'}}像素</span> 
        <span v-if="navDetail.type=='rect_top'">750*375像素</span>  -->
            <ul :class="navDetail.type" v-if='navDetail.type=="column"'> 
                <li v-for='(item,index) in options.imgList' :key='index'  :style="`width:calc(${100/options.imgList.length}% - ${options.spaceSize/4 ||0 }px);${!item.imageUrl?'':`background:url(${item.imageUrl}) 50% 50% / cover no-repeat;`}`" :class="[`flex${ options.imgList.length}`,{'noImg':!item.imageUrl}]">
                <!-- <img :src="item.imageUrl" alt="" :class="[{'widthMore':item.naturalHeight < options.naturalHeight},{'heightMore':item.naturalHeight>options.naturalHeight}]"> -->
                </li>
            </ul>

                <!-- // 四个正方形 ok -->
            <ul :class="navDetail.type"  v-if="navDetail.type=='square'">
                <div class="flex flex_start">
                    <div v-for='(item,index) in 2' :key='index' class="flex_img" :class="{'noBg':options.imgList[index].imageUrl}" :style="`width:calc(50% - ${options.spaceSize/4 ||0 }px);height:calc(100%  -  ${options.spaceSize/4 || 0 }px);${!options.imgList[index].imageUrl?'':`background:url(${options.imgList[index].imageUrl}) 50% 50% / cover no-repeat;`}`">
                        <!-- <img  v-if='options.imgList[index]' :class="{'heightMore':options.imgList[index].heightMore}" :src="options.imgList[index].imageUrl" alt=""  > -->
                    </div>
                </div>
                <div class="flex flex_end">
                    <div v-for='(item,index) in [2,3]' :key='index' class="flex_img" :class="{'noBg':options.imgList[item].imageUrl}" :style="`width:calc(50% - ${options.spaceSize/4 ||0 }px);height:calc(100%  -  ${options.spaceSize/4 || 0 }px);${!options.imgList[item].imageUrl?'':`background:url(${options.imgList[item].imageUrl}) 50% 50% / cover no-repeat;`}`">
                        <!-- <img v-if='options.imgList[item]' :class="{'heightMore':options.imgList[item].heightMore}" :src=" options.imgList[item].imageUrl" alt=""  > -->
                    </div>
                </div>
            </ul>
                <!-- 左长方形，右正方形 ok -->
            <ul :class="navDetail.type"  v-if="navDetail.type=='rect_square'">
                <div class="flex flex_reat">
                    <div class="flex_img" :class="{'noBg':options.imgList[0].imageUrl}" :style="`width:calc(100% - ${options.spaceSize/4 ||0 }px);height:100%;`">
                        <div class="img_div" :style="`${!options.imgList[0].imageUrl ? `background:url(${columnDefaultImg}) center center no-repeat;`:`background:url(${options.imgList[0].imageUrl}) center center no-repeat;background-size:cover`}`"> </div>
                    </div>
                </div>
                <div class="flex flex_square">
                    <div  class="flex_img" :class="{'noBg':options.imgList[1].imageUrl}" :style="`width:calc(100% - ${options.spaceSize/4 ||0 }px);height:calc(50%  -  ${options.spaceSize/4 || 0 }px);`">
                        <div   class="img_div" :style="`${!options.imgList[1].imageUrl ? `background:url(${columnDefaultImg}) center center no-repeat;`: `background:url(${options.imgList[1].imageUrl}) center center /cover no-repeat`}`"> </div>
                    </div>
                    <div  class="flex_img" :class="{'noBg':options.imgList[2].imageUrl}" :style="`width:calc(100% - ${options.spaceSize/4 ||0 }px);height:calc(50%  -  ${options.spaceSize/4 || 0 }px)`">
                        <div  class="img_div"   :style="`${!options.imgList[2].imageUrl ? `background:url(${columnDefaultImg}) center center no-repeat;`:`background:url(${options.imgList[2].imageUrl}) center center /cover no-repeat`}`"> </div>
                    </div>
                </div>
            </ul>
            
                <!-- //左正  右长方形 -->
                <ul :class="navDetail.type"  v-if="navDetail.type=='square_rect'">
                <div class="flex flex_square">
                    <div  class="flex_img" :class="{'noBg':options.imgList[0].imageUrl}" :style="`width:calc(100% - ${options.spaceSize/4 ||0 }px);height:calc(50%  -  ${options.spaceSize/4 || 0 }px)`">
                        <div  class="img_div" :style="`${!options.imgList[0].imageUrl ? `background:url(${columnDefaultImg}) center center no-repeat;`: `background:url(${options.imgList[0].imageUrl}) center center /cover no-repeat`}`" ></div>
                    </div>
                    <div  class="flex_img" :class="{'noBg':options.imgList[2].imageUrl}" :style="`width:calc(100% - ${options.spaceSize/4 ||0 }px);height:calc(50%  -  ${options.spaceSize/4 || 0 }px)`">
                        <div class="img_div"  :style="`${!options.imgList[2].imageUrl ? `background:url(${columnDefaultImg}) center center no-repeat;`: `background:url(${options.imgList[2].imageUrl}) center center /cover no-repeat`}`" ></div>
                    </div>
                </div>
                <div class="flex flex_reat">
                    <div class="flex_img" :class="{'noBg':options.imgList[1].imageUrl}" :style="`width:calc(100% - ${options.spaceSize/4 ||0 }px);height:100%;`">
                        <div class="img_div" :style="`${!options.imgList[1].imageUrl ? `background:url(${columnDefaultImg}) center center no-repeat;`: `background:url(${options.imgList[1].imageUrl}) center center /cover no-repeat`}`" ></div>
                    </div>
                </div>
            </ul>

                <!-- 上面长方形，下面正方形 -->
            <ul :class="navDetail.type"  v-if="navDetail.type=='rect_square_top'">
                <div class="flex flex_reat">
                    <div class="flex_img" :class="{'noBg':options.imgList[0].imageUrl}" :style="`height:calc(100% - ${options.spaceSize/4 ||0 }px);width:100%;`">
                        <img :src=" options.imgList[0].imageUrl" :class="!options.imgList[0].heightMore?'heightMore':'widthMore'" alt=""  >
                    </div>
                </div>
                <div class="flex flex_square">
                    <div  class="flex_img" :class="{'noBg':options.imgList[1].imageUrl}" :style="`width:calc(50% - ${options.spaceSize/4 ||0 }px);height:calc(100%  -  ${options.spaceSize/4 || 0 }px)`">
                        <img :src=" options.imgList[1].imageUrl" :class="options.imgList[1].heightMore?'heightMore':'widthMore'" alt=""  >
                    </div>
                    <div  class="flex_img" :class="{'noBg':options.imgList[2].imageUrl}" :style="`width:calc(50% - ${options.spaceSize/4 ||0 }px);height:calc(100%  -  ${options.spaceSize/4 || 0 }px)`">
                        <img :src=" options.imgList[2].imageUrl" :class="options.imgList[2].heightMore?'heightMore':'widthMore'" alt=""  >
                    </div>
                </div>
            </ul>

            <!-- // 上面长方形，下面长方形 -->
            <ul :class="navDetail.type"  v-if="navDetail.type=='rect_top'">
                <div class="flex flex_reat">
                    <div class="flex_img" :class="{'noBg':options.imgList[0].imageUrl}" :style="`height:calc(100% - ${options.spaceSize/4 ||0 }px);width:100%;`">
                            <img :src=" options.imgList[0].imageUrl" :class="options.imgList[0].heightMore ? 'heightMore':'widthMore'" alt=""  >
                    </div>
                </div>
                <div class="flex flex_reat2">
                    <div class="flex_img" :class="{'noBg':options.imgList[1].imageUrl}" :style="`height:calc(100% - ${options.spaceSize/4 ||0 }px);width:100%;`">
                            <img :src=" options.imgList[1].imageUrl" :class=" options.imgList[1].heightMore ? 'heightMore':'widthMore'" alt=""  >
                    </div>
                </div>
            </ul>

            <img class="bgImg" v-if='options.bgUrl' :src="options.bgUrl" alt="">
    </div>
</template>
<script>
export default {
    data(){
        return{
            options:{
                imgList:[{},{},{},{}]
            },
            navDetail:{},
            boxHeight:200,
            columnDefaultImg:require('@/assets/img/editContent/pic-nor-small.png')
        }
    },
    props:{
        option:{
            type:Object
        }
    },
    methods:{
       watchOption(val){
            this.options =JSON.parse(JSON.stringify(val))||{};
            this.navDetail = this.options.navDetail;
            let hasImg = false;
            this.options.imgList.length&&this.options.imgList.map((val,index)=>{
                if(val.imageUrl && !hasImg){  //存在图片
                    hasImg  =true;
                }
                else{
                    return ;
                }
            })
            if(this.navDetail.type=='column'){
                if(hasImg){  
                    this.boxHeight = ((1/this.options.imgList.length)*375-(this.options.spaceSize/4))/this.options.scale;
                }else{
                    this.boxHeight  = 200;
                }
            }else{
                this.boxHeight  = 375;
            }
       }
    },
    watch:{
        option:function(val){
            console.log(val)
            this.watchOption(val)
        }
    },
    mounted(){
        this.watchOption(this.option);
    }
}
</script>
<style lang="less" scoped>
    .magic{
        width:100%;
        height:200px;
        position:relative;
        background:#ffffff;
        .bgImg{
            position:absolute;
            top:0;
            left:0;
            z-index: 1;
            width:100%;
            height:100%;
        }
        .column,.square,.rect_square,.square_rect,.rect_square_top,.rect_top{
            width:100%;
            height:100%;
            // background:url('~@/assets/img/editContent/pic-nor-small.png') center center  no-repeat;
            // background-color:#F8F3F0;
            img{
                width:auto;
                height:100%;
                display:inline-block;
                // background:url('~@/assets/img/editContent/pic-nor-small.png') center center  no-repeat;
                // background-color:#F8F3F0;
            }
            .heightMore{
                width:100%;
                height:auto;
            }
            .img_div{
                width:100%;
                height:100%;
            }
        }
        .rect_square{
            .heightMore,.img_div{
                width:100%;
                height:100%;
            }
        }
        .column{
            width:100%;
            height:100%;
            // padding:7.5px 13px; 
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position:relative;
            z-index: 2;
            overflow: hidden;
            li{
                height:100%;
                position:relative;
                display:flex;
                justify-content: center;
                align-items: center;
                float:left;
                overflow: hidden;
                background:url('~@/assets/img/editContent/pic-nor-small.png') center center  no-repeat;
                background-color:#F8F3F0;
                img{
                    width:100%;
                    height:100%;
                    display:inline-block;
                    background:url('~@/assets/img/editContent/pic-nor-small.png') center center  no-repeat;
                    background-color:#F8F3F0;
                }
                .heightMore{
                   width:100%;
                   height:auto;
                }
                .widthMore{
                    width:auto;
                    height:100%;
                }
            }
            .noImg{
                height:100%;
                border:1px solid #e0d4d4;
            }
        }
        .square{
            width:100%;
            height:100%;
           .flex{
               width:100%;
               height:50%;
               display:flex;
               justify-content: space-between;
           }
        }
        .rect_square,.square_rect,.rect_square_top,.rect_top{
            .flex{
                display:flex;
                float:left;
               
            }
            .flex_reat{
                width:50%;
                height:100%;
                justify-content: flex-start;
                align-items: center;
                 
            }
            .flex_square{
                width:50%;
                height:100%;
                justify-content: space-between;
                flex-direction: column;
                align-items: flex-end;
                
            }
        }
        .rect_square_top{
            .flex_reat{
                width:100%;
                height:50%;
                align-items: normal;
            }
            .flex_square{
                width:100%;
                height:50%;
                flex-direction: initial
            }
        }
        .rect_top{
            justify-content: space-between;
            .flex{
                width:100%;
                height:50%;
                align-items: flex-end;
            }
            .flex_reat{
                align-items: normal
            }
            .flex_reat2{
               justify-content: flex-start;
            }
            .flex_img {
                img{
                    width:100%;
                    height:auto;
                } 
            }
        }
        .square_rect{
           .flex_reat{
                justify-content: flex-end;
           }
            .flex_square{
                align-items: flex-start;
            }
        }
    }
    .flex_img{
        display:flex;
        justify-content: center;
        align-items: center;
        overflow:hidden;
        border:1px solid #e0d4d4;
        box-sizing: border-box;
        background:url('~@/assets/img/editContent/pic-nor-small.png') center center  no-repeat;
        background-color:#F8F3F0;
    }
    .flex_start{
        align-items: flex-start;
    }
    .flex_end{
        align-items: flex-end;
    }
    .noBg{
        background:none; 
        border:none;
    }
</style>